import React, { useState } from 'react';
import { Resizable } from "re-resizable";
import { Layout, Input } from 'antd';
import { DndContext, DragOverlay } from '@dnd-kit/core';
import DraggableItem from '@/components/Draggable';
import { Droppable } from '@/components/Droppable';
import styles from './Welcome.less'



function Mainpage() {
    function handleDragStart(event) {
        setActiveId(event.active.id);
    }

    function handleDragEnd({ over, active, delta }) {
        setActiveId(null);
        setconfig((config) => {
            let newconfig = JSON.parse(JSON.stringify(config));
            if (active.id && over?.id) {
                //新建id 并 配置基础位置信息
                let idstr = active.id.indexOf("temp") == -1 ? "temp" + active.id + Object.keys(newconfig).length : active.id;
                let prevx = newconfig[idstr]?.x ?? 0,
                    prevy = newconfig[idstr]?.y ?? 0,
                    deltax = active.id.indexOf("temp") == -1 ? delta.x - 200 : delta.x;
                newconfig[idstr] = {
                    idstr,
                    x: resizing ? prevx : prevx + deltax,
                    y: resizing ? prevy : prevy + delta.y
                }
            }
            console.log(newconfig);
            return newconfig
        })
    }
    return (
        <DndContext style={{ height: "100%" }} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>



        </DndContext>
    );
}

export default Mainpage;